<template>
  <div>
    <el-table :data="pageData.goodsData" style="width: 100%;margin-bottom:20px" max-height="600">
      <el-table-column fixed prop="previewSrc" label="图片" width="150">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.previewSrc"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="菜名" width="120"></el-table-column>
      <el-table-column prop="price" label="价格" width="120"></el-table-column>
      <el-table-column prop="brief" label="简介" width="300"></el-table-column>
      <el-table-column prop="stock" label="库存" width="120"></el-table-column>
      <el-table-column prop="categoryId.name" label="种类" width="120"></el-table-column>
      <el-table-column prop="istake" label="状态" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button size="mini" @click="goodsUpdate(scope.row._id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination></pagination>
  </div>
</template>
<script>
import axios from "axios";
import pagination from "./pagination.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "goodsList"
);
export default {
  data() {
    return {
      goods: {
        _id: "",
        istake: 2
      }
    };
  },
  components: {
    pagination
  },
  computed: {
    ...mapState(["pageData"])
  },
  mounted() {
    this.getGoodsAsync();
  },
  methods: {
    ...mapActions(["getGoodsAsync"]),
    // 获取当前点击食品的数据
    // getGoodsOne: function() {
    //   axios.get(`/goods/${goodsId}`).then(res => {
    //     this.form = res.data[0];
    //   });
    // },
    goodsUpdate(goodsId) {
      this.$router.push(`/goodsUpdate/${goodsId}`);
    },
    handleDelete(index, row) {
      // const{_id}=row;
      this.goods._id = row._id;
      axios.put("/goods/deleteOne", this.goods).then(res => {
        if (res.data) {
          alert("修改成功");
        }
      });
      this.getGoodsAsync();
    }
  }
};
</script>

<style>
</style>